/* color palette from <https://github.com/vuejs/theme> */
:root {
    --color-primary: #1d90f5;
    --color-link: #002aff;
    --color-wechat: #2aae67;
    --color-online: greenyellow;
    --color-white: #fff;
    --color-gold: #c59512;
    --color-light-1: #bebebe;
    --color-light-2: #dedfe0;
    --color-light-3: #e9e9eb;
    --color-light-4: #f5f5f5;
    --color-light-5: #e0e0df;

    /* font */
    --font-placeholder: #a8abb2;
    --font-main: #fff;
    --font-base: #333;
    --font-gray: #666;
    --font-light: #999;
    --font-light-1: #eee;
    --font-pink: #fe2c55;

    /* 背景色 */
    --background-indigo: #2c3e50;
    --background-wrapper: #272a37;
    --background-secondary: #323644;
    --background-black-half: rgba(0, 0, 0, 50%);
    --background-dark: rgba(39, 42, 55, 40%);
    --background-mask: rgba(255, 255, 255, 20%);
    --background-1: #2b2d31;
    --background-2: #383c4b;
    --background-3: #424656;
    --background-4: #efe2bb;

    /* hover */
    --hover-primary: #2287e1;
    --hover-bg-1: #484d5f;
    --hover-bg-2: rgba(0, 0, 0, 20%);

    /* border */
    --border-base: var(--color-background-1);
    --border-pink: #b52c47;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background-wrapper: var(--color-light-4);
    --background-secondary: var(--color-light-3);
    --font-main: var(--font-base);
  }
} */

*,
*::before,
*::after {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    font-weight: normal;
}

body {
    min-height: 100vh;
    padding: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background: var(--color-background);
    transition: color 0.5s, background-color 0.5s;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a:link,
a:visited {
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

a:hover,
a:active {
    color: var(--color-primary);
    cursor: pointer;
}

.ellipsis-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}

.ellipsis-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

.icon-spin {
    animation: icon-loading 1s infinite cubic-bezier(0, 0, 1, 1);
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes icon-loading {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}
